An image map is a image which has been divided into regions or "hotspots"; when the "hotspot" is clicked a web page displays. Use the Image inspector to graphically create and edit client-side image maps.
Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps, because the server does not need to interpret where the user clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet Explorer.
Dreamweaver does not alter references to server-side image maps in existing documents. You can use both client-side image maps and server-side image maps in the same document. Note that browsers that support both types of image maps give priority to client-side image maps. To include a server-side image map in a document, you have to write the appropriate HTML code.
To create a client-side image map:
| 1 | Select the image. |
| 2 | Click the expander arrow in the lower right corner of the Property inspector to see all properties. |
| 3 | Type the name for the map in the Map Name field. |
| Note: If you are using multiple image maps in the same document be sure to give each map a unique name. | |
| 4 | To define the image map areas, do one of the following: |
|
Select the circle tool and drag the pointer over the image to create a circular hotspot |
|
Select the rectangle tool and drag the pointer over the image to create a circular hotspot |
|
Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click on the arrow tool to close the shape. |
| When the hotspot is selected, the Hotspot inspector appears beneath the Property inspector. For information about the Hotspot inspector, see Setting hotspot properties. | |
| 5 | In the Hotspot inspector, click the folder icon to browse to file to open when the hotspot is clicked, or type the file name in the Link field. |
| 6 | To make the linked document appear somewhere other than the current window or frame, enter a window name in the Target box or choose a frame name from the pop-up menu. |
| See Creating links. | |
| 7 | In the Alt box, type alternative text that is displayed for the hotspot in text-only browsers. |
| Some browsers display this text as a tooltip when the user pauses the mouse pointer over the hotspot. | |
| 8 | Repeat steps 4 through 7 to define additional hotspots in the image map. |
|
To select multiple hotspots in an image map:
With the image selected, do one of the following:
|
Shift-click the other hotspots you want to select |
|
Press Control+A (Windows) or Command+A (Macintosh) |
When you copy an image from one document to another, the hotspots associated with that image are also copied.
You can use the arrow keys or the mouse to move single or multiple hotspots at once. You can also choose Modify > Layers and Hotspots to align the hotspots, bring them to the front or send them to the back, or make them the same width and height. If two hotspots overlap, the first hotspot is dominant.